<template>
  <div id="multi-select">
    <van-tree-select height="60vw" :items="treeList" :main-active-index.sync="activeIndex"
        :active-id.sync="activeId"
        @click-item="changeItem"
    />


  </div>
</template>

<script>
export default {
  name: "MultiSelect",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.activeId = val;
      },
      immediate: true
    }
  },
  created() {

  },
  data() {
    return {
      activeIndex: 0,
      activeId: [],
    }
  },
  methods: {
    changeItem() {
      this.$emit('update:value', this.activeId);
    }
  },
  computed: {
    treeList() {
      return [{text: '选择', children: this.list.map(({ text, value }) => ({ id: value, text }))}];
    },
  }
}
</script>

<style lang="scss">
#multi-select {
  .van-tree-select__nav {
    display: none;
  }
}
</style>
